<h4 *ngIf="showTitle()">{{ title }}</h4>
<clr-datagrid>
  <clr-dg-placeholder>
    <ng-container *ngIf="placeholder?.length > 0; else emptyPlaceholder">
      {{ placeholder }}
    </ng-container>
    <ng-template #emptyPlaceholder>
      All content has been filtered out.
    </ng-template>
  </clr-dg-placeholder>
  <clr-dg-column *ngFor="let columnName of columns; trackBy: identifyColumn">
    {{ columnName }}
    <clr-dg-filter *ngIf="filters[columnName]">
      <app-content-filter 
        [column]="columnName"
        [filter]="filters[columnName]"
      ></app-content-filter>
    </clr-dg-filter>
    <clr-dg-filter *ngIf="!filters[columnName]">
      <app-content-text-filter 
        [column]="columnName"
      ></app-content-text-filter>
    </clr-dg-filter>  </clr-dg-column>
  <clr-dg-row
    *clrDgItems="let row of rowsWithMetadata; trackBy: identifyRow"
    [ngClass]="row | filterDeletedDatagridRow"
  >
    <clr-dg-action-overflow *ngIf="row.actions.length > 0 && !row.isDeleted">
      <ng-container *ngFor="let action of row.actions">
        <button class="action-item" (click)="runAction(action)">
          {{ action.name }}
        </button>
      </ng-container>
    </clr-dg-action-overflow>
    <clr-dg-cell *ngFor="let column of columns; trackBy: identifyColumn">
      <app-content-switcher [view]="row.data[column]"></app-content-switcher>
    </clr-dg-cell>
  </clr-dg-row>
  <clr-dg-footer>
    <clr-dg-pagination #pagination [clrDgPageSize]="10">
      <clr-dg-page-size [clrPageSizeOptions]="[10, 20, 50, 100]">
        Items per page
      </clr-dg-page-size>
      <ng-container *ngIf="rowsWithMetadata?.length > 0">
        {{ pagination.firstItem + 1 }} - {{ pagination.lastItem + 1 }} of
        {{ pagination.totalItems }} items
      </ng-container>
    </clr-dg-pagination>

    <ng-container *ngIf="loading">
      <span class="spinner spinner-inline" style="margin-right: 10px;">
        Loading...
      </span>
    </ng-container>
  </clr-dg-footer>
</clr-datagrid>

<clr-modal [(clrModalOpen)]="isModalOpen">
  <h3 class="modal-title">
    {{ actionDialogOptions?.confirmation?.title }}
  </h3>
  <div class="modal-body">
    <div
      markdown
      ngPreserveWhitespaces
      [data]="actionDialogOptions?.confirmation?.body"
    ></div>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-outline" (click)="cancelModal()">
      Cancel
    </button>
    <button
      type="button"
      class="btn btn-primary"
      (click)="acceptModal()"
      [ngClass]="['btn', 'btn-' + actionDialogOptions?.type + '-outline']"
    >
      {{ actionDialogOptions?.text }}
    </button>
  </div>
</clr-modal>
